<!DOCTYPE html>
<html>
<head>
    <title>{$name} {$seo_title} {$site_name}</title>
    <meta name="keywords" content="{$seo_keywords}" />
    <meta name="description" content="{$seo_description}">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <tc_include file="Public:head" />
    <link href="/themes/simplebootx/Public/assets/css/reset.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/public/css/sl_style.css?v={$SOURCE_VERSION}">
    <link rel="stylesheet" href="__PUBLIC__/swiper/swiper.min.css">
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css" />
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script>
    <style>
        body {
            padding-top:50px;
        }
        .ellipsis3 {overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;}
        .clearfix:after{visibility: hidden; display: block; font-size: 0; content: " "; clear:both; height: 0; }
        .container {
            width: 90%;

        }
        .container_nav {
            width: 1198px!important;
            background-color: #fff;
        }
        /*左侧区域*/
        .video_info {
            margin-top: 28px;
            float: left;
            width: 57%;
        }
        .video_info .title {
            font-size: 14px;
            color: #333333;
            line-height: 18px;
            font-weight: bold;
            color: #FFFFFF;
        }
        .video_info .title span {
            margin-left: 6px;
            font-weight: bold;
        }
        .video_info .video_content {
            width: 100%;
            height: 534px;
            background-color: #000232;
            margin-top: 32px;
        }
        .video_info .name {
            font-size: 18px;
            color: #333333;
            line-height: 22px;
            font-weight: bold;
            margin-top: 22px;
        }
        .video_info .key_word {
            font-size: 12px;
            color: #333333;
            line-height: 16px;
            margin-top: 8px;
        }
        /*侧边栏*/
        .video_side {
            float: right;
            margin-top: 78px;
            width:41%;
            margin-left: 2%;
            height: 534px;
            position: relative;
        }
        .video_side_title {
            font-size: 14px;
            color: #333333;
            font-weight: bold;
            line-height: 22px;
        }
        .say_person{
            position: absolute;
            left: 0;
            top: -65px;
        }
         .say_person .img-ground {
            width: 48px ;
            height: 48px;
            float: left;
        }
        .say_person .img-ground img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .say_person .text {
            margin-left: 64px;
            color: #FFFFFF;
        }
        .say_person .name {
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 2px;
            line-height: 30px;
            float: left;
            margin-right: 10px;
        }
        .say_person .position {
            float: left;
            font-size: 12px;
            line-height: 31px;
        }
        .say_person .company_name  {
            font-size: 12px;
            line-height: 16px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        /*专题名称部分*/
        .special {
            margin-top: 15px;
        }
        .special .header,.special .curriculum {
            float: left;
        }
        .special .header .picture_ground {
            height: 80px;
            width: 145px;
            float: left;
        }
        .special .header .picture_ground img{
            width: 100%;
            height: 100%;
        }
        .special .header .text{
            margin-left: 154px;
        }
        .special .header .text h4 {
            font-size: 16px;
            font-weight: bold;
            color: #000232;
            line-height: 22px;
            width: 132px;
            height: 66px;
            margin-top: -1px;
            letter-spacing: 1px;
        }
        .special .header .text .number {
            font-size: 12px;
            color: #707070;
            line-height: 12px;
            margin-top: 4px;
        }
        .special .curriculum {
            margin-left: 8px;
            padding-left: 9px;
            height: 80px;
            border-left: 1px solid #707070;
            font-size: 12px;
            color: #333333;
            letter-spacing: 1px;
            line-height: 12px;
        }
        .special .curriculum h4 {
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 2px;
            line-height: 24px;
            margin-top: -3px;
            width: 308px;
            height: 48px;
        }
        .special .curriculum .key_word{
            margin-top:16px;
            color: #333333;
        }
        /*课程列表*/
        .curriculum_list h5 {
            font-size: 14px;
            color: #333333;
            font-weight: bold;
            letter-spacing: 1px;
            line-height: 14px;
            margin-top: 30px;
        }
        .curriculum_list .curriculum_item {
            width: 145px;
            height: 134px;
            margin: 12px 22px 24px 0;
            float: left;
        }
        .curriculum_item .picture_ground {
            height: 80px;
        }
        .curriculum_item .picture_ground img {
            width: 100%;
            height: 100%;
        }
        .curriculum_item .text {
            font-size: 12px;
            line-height: 16px;
            margin-top: 7px;
            color: #000232;
            height: 48px;
        }
        .container_nav {
            width: 1642px!important;
        }
    </style>
</head>
<body>

<tc_include file="Public:nav" />
<div style="height: 660px;background-color: #000;">
    <div class="container tc-main clearfix" >
        <div class="video_info">
            <p class="title">[正在播放]<span>{$lesson.lesson_name}</span></p>
            <div class="video_content">
                <div class="prism-player" id="J_prismPlayer"></div>
            </div>
        </div>
        <!--侧边栏-->
        <div class="video_side">
            <!--pdf引入-->
            <if condition="!empty($lesson['lesson_file_path'])">
                <div>
                    <iframe src="{:sp_get_asset_upload_path($lesson['lesson_file_path'])}" frameborder="0" style="width:100%;height: 534px;" id="lesson_iframe">

                    </iframe>
                </div>
            </if>
            <!--主讲人-->
            <div class="say_person">
                <a href="{:U('User/Index/professor_homepage', ['professor_id' => $lesson['lecturer_user_id']])}">
                    <div class="img-ground">
                        <img src="{:sp_get_user_avatar_url($lesson['avatar'])}" alt="">
                    </div>
                    <div class="text">
                        <div class="clearfix" style="height: 31px;">
                            <p class="name">{$lesson.user_nicename}</p>
                            <p class="position">{$lesson.position}</p>
                        </div>
                        <p class="company_name">{$lesson.company}</p>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="container">
        <!--专题标题-->
        <div class="special clearfix">
            <div class="header">
                <div class="picture_ground">
                    <img src="{:sp_get_asset_upload_path($subject_info['subject_img'])}" alt="">
                </div>
                <div class="text">
                    <h4 class="ellipsis3">{$subject_info.subject_name}</h4>
                    <p class="number">共<span>{:count($lesson_lists)}</span>节</p>
                </div>
            </div>
            <div class="curriculum">
                <h4 class="ellipsis2">{$lesson.lesson_name}</h4>

                   <p class="key_word">
                       <volist name="lesson.label_names" id="vo">
                            <span style="margin-right: 5px;">{$vo}</span>
                       </volist>
                   </p>

            </div>
        </div>
        <!--课程列表-->
        <div class="curriculum_list clearfix">
            <h5>更多课程</h5>
            <volist name="lesson_lists" id="vo">
                <a href="{:U('Lesson/Lesson/lesson_index', ['id' => $vo['id']])}">
                    <div class="curriculum_item">
                        <div class="picture_ground">
                            <img src="{:sp_get_asset_upload_path($vo['lesson_img'])}" alt="">
                        </div>
                        <p class="text ellipsis3">
                            {$vo.lesson_name}
                        </p>
                    </div>
                </a>
            </volist>
        </div>
    </div>
<tc_include file="Public:footer" />
<!-- JavaScript -->
<tc_include file="Public:scripts" />
<script src="__PUBLIC__/js/pdf/pdf.js"></script>
<script src="__PUBLIC__/js/pdf/pdf.worker.js"></script>
<script>
    $(document).ready(function () {
        var video_type = "{$lesson['video_type']}";
        if (video_type == 2) {
            // 音频，添加背景图
            $('.prism-player').css('background', "url({:sp_get_asset_upload_path($lesson['lesson_audio_img'])}) no-repeat");
            $('.prism-player').css('background-size', '100% 100%');
        }
    })
</script>
<script>
    // var url = '/pdf/doc/demo1.pdf';
    var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 0.8,
        canvas = document.getElementById('the-canvas');
        // ctx = canvas.getContext('2d');

    /**
     * Get page info from document, resize canvas accordingly, and render page.
     * @param num Page number.
     */
    function renderPage(num) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function(page) {
            var viewport = page.getViewport(scale);
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);

            // Wait for rendering to finish
            renderTask.promise.then(function() {
                pageRendering = false;
                if (pageNumPending !== null) {
                    // New page rendering is pending
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });

        // Update page counters
        document.getElementById('page_num').textContent = num;
    }

    /**
     * If another page rendering in progress, waits until the rendering is
     * finised. Otherwise, executes rendering immediately.
     */
    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }

    /**
     * Displays previous page.
     */
    function onPrevPage() {
        if (pageNum <= 1) {
            return;
        }
        pageNum--;
        queueRenderPage(pageNum);
    }
    document.getElementById('prev').addEventListener('click', onPrevPage);

    /**
     * Displays next page.
     */
    function onNextPage() {
        if (pageNum >= pdfDoc.numPages) {
            return;
        }
        pageNum++;
        queueRenderPage(pageNum);
    }
    document.getElementById('next').addEventListener('click', onNextPage);

    /**
     * Asynchronously downloads PDF.
     */
    PDFJS.getDocument(url).then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        document.getElementById('page_count').textContent = pdfDoc.numPages;

        // Initial/first page rendering
        renderPage(pageNum);
    });
</script>

<script>
    var player = new Aliplayer({
        id: "J_prismPlayer",
        autoplay: false,
        width:"100%",
        height:"534px",
        source: "{$PlayURL}",
        encryptType: 1,
    });
</script>

</body>
</html>